<template>
  <div class="clue-container">
    <!-- 搜索筛选区域 -->
    <div class="search-filter">
      <div class="filter-row">
        <div class="filter-left">
          <el-input v-model="searchForm.id" placeholder="商机ID" clearable class="search-input" />
          <el-input v-model="searchForm.customerName" placeholder="客户姓名" clearable class="search-input" />
          <el-input v-model="searchForm.phone" placeholder="手机号" clearable class="search-input" />
          <el-select v-model="searchForm.status" placeholder="商机状态" clearable class="search-select">
            <el-option label="请选择" value="" />
            <el-option label="待分配" value="to_assign" />
            <el-option label="待跟进" value="to_follow" />
            <el-option label="跟进中" value="following" />
            <el-option label="回收" value="recycled" />
            <el-option label="转客户" value="converted" />
          </el-select>
          <el-input v-model="searchForm.owner" placeholder="归属人" clearable class="search-input" />
        </div>
        <div class="filter-right">
          <el-button type="primary" @click="handleSearch" class="search-btn">搜索</el-button>
          <el-button @click="resetSearch" class="reset-btn">重置</el-button>
        </div>
      </div>
    </div>

    <!-- 工具栏 -->
    <div class="toolbar">
      <el-button type="primary" @click="showAddBusinessDialog = true" class="add-btn">
        <el-icon><Plus /></el-icon>
        新建商机
      </el-button>
      <el-button type="success" @click="handleBatchAssign" :disabled="selectedRows.length === 0">
        <el-icon><User /></el-icon>
        批量分配
      </el-button>
    </div>

    <!-- 商机列表 -->
    <div class="clue-table-wrapper">
      <el-table 
        v-loading="loading"
        :data="businessList" 
        style="width: 100%"
        @selection-change="handleSelectionChange"
        row-key="id"
        stripe
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center' }"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="商机ID" :width="idColumnWidth" show-overflow-tooltip />
        <el-table-column prop="customerName" label="姓名" :width="nameColumnWidth" show-overflow-tooltip />
        <el-table-column prop="phone" label="手机号" :width="contentColumnWidth" show-overflow-tooltip />
        <el-table-column prop="intentionSubject" label="意向学科" :width="contentColumnWidth" show-overflow-tooltip />
        <el-table-column prop="owner" label="归属人" :width="ownerColumnWidth" show-overflow-tooltip />
        <el-table-column prop="createTime" label="创建时间" :width="contentColumnWidth" show-overflow-tooltip />
        <el-table-column prop="status" label="商机状态" :width="statusColumnWidth">
          <template #default="scope">
            <span :class="getStatusClass(scope.row.status)">{{ getStatusText(scope.row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" :width="actionColumnWidth" fixed="right">
          <template #default="scope">
            <!-- 分配按钮 - 只有状态为待分配时显示 -->
            <el-button 
              v-if="scope.row.status === 'to_assign'" 
              size="small" 
              @click="handleAssign(scope.row)"
            >
              分配
            </el-button>
            
            <!-- 跟进按钮 - 只有状态为待跟进或跟进中时显示 -->
            <el-button 
              v-if="['to_follow', 'following'].includes(scope.row.status)" 
              size="small" 
              @click="handleFollow(scope.row)"
              type="primary"
            >
              跟进
            </el-button>
            
            <!-- 踹回公海按钮 - 只有状态为待跟进或跟进中时显示 -->
            <el-button 
              v-if="['to_follow', 'following'].includes(scope.row.status)" 
              size="small" 
              @click="handleRecycleToPool(scope.row)"
            >
              踹回公海
            </el-button>
            
            <!-- 转客户按钮 - 只有状态为待跟进或跟进中时显示 -->
            <el-button 
              v-if="['to_follow', 'following'].includes(scope.row.status)" 
              size="small" 
              @click="handleConvertToCustomer(scope.row)"
            >
              转客户
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 添加商机弹窗 -->
    <el-dialog
      v-model="showAddBusinessDialog"
      title="添加商机"
      width="500px"
      destroy-on-close
    >
      <el-form :model="addBusinessForm" :rules="addBusinessRules" ref="addBusinessFormRef" label-width="80px">
        <el-form-item label="客户姓名" prop="customerName">
          <el-input v-model="addBusinessForm.customerName" placeholder="请输入姓名" maxlength="20" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="addBusinessForm.phone" placeholder="请输入手机号" maxlength="11" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="addBusinessForm.gender" placeholder="请选择">
            <el-option label="男" value="male" />
            <el-option label="女" value="female" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="addBusinessForm.age" placeholder="请输入年龄" type="number" />
        </el-form-item>
        <el-form-item label="微信号">
          <el-input v-model="addBusinessForm.wechat" placeholder="请输入微信号" maxlength="30" />
        </el-form-item>
        <el-form-item label="QQ">
          <el-input v-model="addBusinessForm.qq" placeholder="请输入QQ" maxlength="15" />
        </el-form-item>
        <el-form-item label="意向学科" prop="intentionSubject">
          <el-select v-model="addBusinessForm.intentionSubject" placeholder="请选择">
            <el-option label="AI智能应用开发(Java)" value="java" />
            <el-option label="AI大模型开发(Python)" value="python" />
            <el-option label="AI鸿蒙开发" value="harmony" />
            <el-option label="AI大数据" value="bigdata" />
            <el-option label="AI嵌入式" value="embedded" />
            <el-option label="AI测试" value="testing" />
            <el-option label="AI运维" value="devops" />
          </el-select>
        </el-form-item>
        <el-form-item label="意向课程">
          <el-select v-model="addBusinessForm.intentionCourse" placeholder="请选择">
            <el-option label="Java全栈开发" value="java_fullstack" />
            <el-option label="Python数据分析" value="python_data" />
            <el-option label="鸿蒙应用开发" value="harmony_app" />
            <el-option label="大数据开发" value="bigdata_dev" />
          </el-select>
        </el-form-item>
        <el-form-item label="学历">
          <el-select v-model="addBusinessForm.education" placeholder="请选择">
            <el-option label="高中" value="high_school" />
            <el-option label="中专" value="technical_school" />
            <el-option label="大专" value="college" />
            <el-option label="本科" value="bachelor" />
            <el-option label="硕士" value="master" />
            <el-option label="博士" value="doctor" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="在职状态">
          <el-select v-model="addBusinessForm.employmentStatus" placeholder="请选择">
            <el-option label="在职" value="employed" />
            <el-option label="离职" value="unemployed" />
          </el-select>
        </el-form-item>
        <el-form-item label="课程来源">
          <el-select v-model="addBusinessForm.source" placeholder="请选择">
            <el-option label="线上活动" value="online_activity" />
            <el-option label="推广介绍" value="promotion" />
            <el-option label="朋友推荐" value="friend_referral" />
            <el-option label="搜索引擎" value="search_engine" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addBusinessForm.remark" placeholder="备注信息，最多50字" maxlength="50" type="textarea" :rows="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddBusinessDialog = false">取消</el-button>
        <el-button type="primary" @click="submitAddBusiness">确定</el-button>
      </template>
    </el-dialog>

    <!-- 分配商机弹窗 -->
    <el-dialog
      v-model="showAssignDialog"
      title="分配商机"
      width="400px"
      destroy-on-close
    >
      <el-form :model="assignForm" :rules="assignRules" ref="assignFormRef" label-width="100px">
        <el-form-item label="请选择人员" prop="assignee">
          <el-select v-model="assignForm.assignee" placeholder="请选择">
            <el-option label="张明" value="zhangsan" />
            <el-option label="李艳艳" value="liyan" />
            <el-option label="王毅" value="wangyi" />
            <el-option label="李雪" value="lixue" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAssignDialog = false">取消</el-button>
        <el-button type="primary" @click="submitAssign">确定</el-button>
      </template>
    </el-dialog>

    <!-- 跟进商机弹窗 -->
    <el-dialog
      v-model="showFollowDialog"
      title="跟进商机"
      width="600px"
      destroy-on-close
    >
      <el-form :model="followForm" :rules="followRules" ref="followFormRef" label-width="100px">
        <el-form-item label="跟进状态" prop="followStatus">
          <el-select v-model="followForm.followStatus" placeholder="请选择">
            <el-option label="接通" value="connected" />
            <el-option label="拒绝" value="rejected" />
            <el-option label="无人接听" value="no_answer" />
          </el-select>
        </el-form-item>
        <el-form-item label="沟通重点" prop="focusPoints">
          <el-checkbox-group v-model="followForm.focusPoints">
            <el-checkbox label="课程" />
            <el-checkbox label="价格" />
            <el-checkbox label="位置" />
            <el-checkbox label="时间" />
            <el-checkbox label="师资" />
            <el-checkbox label="项目" />
            <el-checkbox label="薪资" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="下次跟进时间" prop="nextFollowTime">
          <el-date-picker
            v-model="followForm.nextFollowTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="沟通纪要" prop="notes">
          <el-input
            v-model="followForm.notes"
            type="textarea"
            :rows="4"
            placeholder="请输入沟通纪要，最多150字"
            maxlength="150"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showFollowDialog = false">取消</el-button>
        <el-button type="primary" @click="submitFollow">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed, onUnmounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus, User } from '@element-plus/icons-vue';

// 搜索表单
const searchForm = ref({
  id: '',
  customerName: '',
  phone: '',
  status: '',
  owner: ''
});

// 加载状态
const loading = ref(false);

// 商机列表数据
const businessList = ref([]);

// 分页信息
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 400
});

// 选中的行
const selectedRows = ref([]);

// 定义列宽度
const idColumnWidth = ref(80); // ID列的固定宽度
const nameColumnWidth = ref(100); // 姓名字列的固定宽度
const ownerColumnWidth = ref(100); // 归属人列的固定宽度
const statusColumnWidth = ref(100); // 状态列的固定宽度（减小）
const actionColumnWidth = ref(300); // 操作列的固定宽度（增大，确保按钮一行显示）
const contentColumnWidth = ref(0); // 其他内容列的宽度

// 监听窗口大小变化，动态调整列宽
const updateColumnWidth = () => {
  // 获取容器宽度
  const containerWidth = document.querySelector('.business-container')?.offsetWidth || 1500;
  // 减去内边距和边距
  const availableWidth = containerWidth - 40; // 减去左右padding 20px
  // 多个列使用固定宽度，剩余列平分剩余宽度
  contentColumnWidth.value = Math.floor((availableWidth - idColumnWidth.value - nameColumnWidth.value - ownerColumnWidth.value - statusColumnWidth.value - actionColumnWidth.value) / 3);
}

// 弹窗状态
const showAddBusinessDialog = ref(false);
const showAssignDialog = ref(false);
const showFollowDialog = ref(false);

// 当前操作的商机
const currentBusiness = ref(null);

// 添加商机表单
const addBusinessForm = reactive({
  customerName: '',
  phone: '',
  gender: '',
  age: '',
  wechat: '',
  qq: '',
  intentionSubject: '',
  intentionCourse: '',
  education: '',
  employmentStatus: '',
  source: '',
  remark: ''
});

const addBusinessFormRef = ref(null);
const addBusinessRules = {
  customerName: [{ required: true, message: '请输入客户姓名', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  intentionSubject: [{ required: true, message: '请选择意向学科', trigger: 'change' }]
};

// 分配表单
const assignForm = reactive({
  assignee: ''
});

const assignFormRef = ref(null);
const assignRules = {
  assignee: [{ required: true, message: '请选择人员', trigger: 'change' }]
};

// 跟进表单
const followForm = reactive({
  followStatus: '',
  focusPoints: [],
  nextFollowTime: '',
  notes: ''
});

const followFormRef = ref(null);
const followRules = {
  followStatus: [{ required: true, message: '请选择跟进状态', trigger: 'change' }],
  focusPoints: [{ required: true, message: '请选择沟通重点', trigger: 'change' }],
  nextFollowTime: [{ required: true, message: '请选择下次跟进时间', trigger: 'change' }],
  notes: [{ required: true, message: '请输入沟通纪要', trigger: 'blur' }]
};

// 处理选择变化
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

// 初始加载数据
onMounted(() => {
  loadBusinessData();
  updateColumnWidth();
  window.addEventListener('resize', updateColumnWidth);
});

// 窗口大小变化监听的清理
onUnmounted(() => {
  window.removeEventListener('resize', updateColumnWidth);
});

// 加载商机数据
const loadBusinessData = () => {
  loading.value = true;
  
  // 模拟API请求延迟
  setTimeout(() => {
    // 模拟数据
    const mockData = [
      {
        id: '948',
        customerName: '张晓明',
        phone: '18933110099',
        intentionSubject: 'AI智能应用开发(Java)',
        owner: '王毅',
        status: 'following',
        createTime: '2025-05-21 08:50:08',
        nextFollowTime: '2025-05-21 08:50:08'
      },
      {
        id: '242',
        customerName: '张晓明',
        phone: '13900331177',
        intentionSubject: 'AI智能应用开发(Java)',
        owner: '张明',
        status: 'following',
        createTime: '2025-05-21 08:50:08',
        nextFollowTime: '2025-05-21 08:50:08'
      },
      {
        id: '424',
        customerName: '张晓明',
        phone: '1894557788',
        intentionSubject: 'AI智能应用开发(Java)',
        owner: '王毅',
        status: 'following',
        createTime: '2025-05-21 08:50:08',
        nextFollowTime: '2025-05-21 08:50:08'
      },
      {
        id: '324',
        customerName: '张晓明',
        phone: '13278782211',
        intentionSubject: 'AI智能应用开发(Java)',
        owner: '李雪',
        status: 'following',
        createTime: '2025-05-21 08:50:08',
        nextFollowTime: '2025-05-21 08:50:08'
      },
      {
        id: '323',
        customerName: '张晓明',
        phone: '1368899330',
        intentionSubject: 'AI智能应用开发(Java)',
        owner: '',
        status: 'to_assign',
        createTime: '2025-05-21 08:50:08',
        nextFollowTime: '2025-05-21 08:50:08'
      },
      {
        id: '574',
        customerName: '张晓明',
        phone: '18994455993',
        intentionSubject: 'AI智能应用开发(Java)',
        owner: '',
        status: 'to_assign',
        createTime: '2025-05-21 08:50:08',
        nextFollowTime: '2025-05-21 08:50:08'
      },
      {
        id: '782',
        customerName: '李小华',
        phone: '13876543210',
        intentionSubject: 'AI大模型开发(Python)',
        owner: '李艳艳',
        status: 'to_follow',
        createTime: '2025-05-20 15:30:22',
        nextFollowTime: '2025-05-22 10:00:00'
      },
      {
        id: '654',
        customerName: '王大力',
        phone: '13789012345',
        intentionSubject: 'AI鸿蒙开发',
        owner: '张明',
        status: 'to_follow',
        createTime: '2025-05-20 10:15:45',
        nextFollowTime: '2025-05-23 14:30:00'
      },
      {
        id: '891',
        customerName: '刘芳',
        phone: '13654321098',
        intentionSubject: 'AI大数据',
        owner: '李雪',
        status: 'following',
        createTime: '2025-05-19 16:40:33',
        nextFollowTime: '2025-05-24 09:00:00'
      },
      {
        id: '732',
        customerName: '赵强',
        phone: '13567890123',
        intentionSubject: 'AI嵌入式',
        owner: '王毅',
        status: 'following',
        createTime: '2025-05-18 11:20:15',
        nextFollowTime: '2025-05-25 16:00:00'
      }
    ];
    
    // 根据搜索条件过滤数据
    let filteredData = [...mockData];
    if (searchForm.value.id) {
      filteredData = filteredData.filter(item => item.id === searchForm.value.id);
    }
    if (searchForm.value.customerName) {
      filteredData = filteredData.filter(item => 
        item.customerName.includes(searchForm.value.customerName)
      );
    }
    if (searchForm.value.phone) {
      filteredData = filteredData.filter(item => 
        item.phone.includes(searchForm.value.phone)
      );
    }
    if (searchForm.value.status) {
      filteredData = filteredData.filter(item => item.status === searchForm.value.status);
    }
    if (searchForm.value.owner) {
      filteredData = filteredData.filter(item => 
        item.owner.includes(searchForm.value.owner)
      );
    }
    
    // 只显示待分配、待跟进、跟进中的商机
    filteredData = filteredData.filter(item => 
      ['to_assign', 'to_follow', 'following'].includes(item.status)
    );
    
    // 模拟分页
    const start = (pagination.value.currentPage - 1) * pagination.value.pageSize;
    const end = start + pagination.value.pageSize;
    businessList.value = filteredData.slice(start, end);
    
    loading.value = false;
  }, 500);
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'to_assign': '待分配',
    'to_follow': '待跟进',
    'following': '跟进中',
    'recycled': '回收',
    'converted': '转客户'
  };
  return statusMap[status] || '未知';
};

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    'to_assign': 'status-follow',
    'to_follow': 'status-follow',
    'following': 'status-follow',
    'recycled': 'status-fake',
    'converted': 'status-follow'
  };
  return classMap[status] || '';
};

// 搜索
const handleSearch = () => {
  pagination.value.currentPage = 1;
  loadBusinessData();
};

// 重置搜索
const resetSearch = () => {
  searchForm.value = {
    id: '',
    customerName: '',
    phone: '',
    status: '',
    owner: ''
  };
  pagination.value.currentPage = 1;
  loadBusinessData();
};

// 分页大小变化
const handleSizeChange = (size) => {
  pagination.value.pageSize = size;
  loadBusinessData();
};

// 当前页变化
const handleCurrentChange = (current) => {
  pagination.value.currentPage = current;
  loadBusinessData();
};

// 提交添加商机
const submitAddBusiness = () => {
  addBusinessFormRef.value.validate((valid) => {
    if (valid) {
      // 模拟提交
      setTimeout(() => {
        ElMessage.success('商机添加成功');
        showAddBusinessDialog.value = false;
        // 重置表单
        Object.keys(addBusinessForm).forEach(key => {
          addBusinessForm[key] = '';
        });
        loadBusinessData();
      }, 500);
    }
  });
};

// 显示批量分配对话框
const handleBatchAssign = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要分配的商机');
    return;
  }
  
  showAssignDialog.value = true;
};

// 处理单行分配
const handleAssign = (row) => {
  currentBusiness.value = row;
  assignForm.assignee = '';
  showAssignDialog.value = true;
};

// 提交分配
const submitAssign = () => {
  assignFormRef.value.validate((valid) => {
    if (valid) {
      // 模拟分配
      setTimeout(() => {
        const assigneeMap = {
          'zhangsan': '张明',
          'liyan': '李艳艳',
          'wangyi': '王毅',
          'lixue': '李雪'
        };
        
        // 处理单行分配或批量分配
        if (selectedRows.value.length > 0) {
          // 批量分配
          selectedRows.value.forEach(row => {
            const index = businessList.value.findIndex(item => item.id === row.id);
            if (index !== -1) {
              businessList.value[index].owner = assigneeMap[assignForm.assignee] || assignForm.assignee;
              businessList.value[index].status = 'to_follow';
            }
          });
          selectedRows.value = [];
        } else if (currentBusiness.value) {
          // 单行分配
          const index = businessList.value.findIndex(item => item.id === currentBusiness.value.id);
          if (index !== -1) {
            businessList.value[index].owner = assigneeMap[assignForm.assignee] || assignForm.assignee;
            businessList.value[index].status = 'to_follow';
          }
        }
        
        ElMessage.success('操作成功');
        showAssignDialog.value = false;
      }, 300);
    }
  });
};

// 处理跟进
const handleFollow = (row) => {
  currentBusiness.value = row;
  // 重置表单
  followForm.followStatus = '';
  followForm.focusPoints = [];
  followForm.nextFollowTime = '';
  followForm.notes = '';
  showFollowDialog.value = true;
};

// 提交跟进
const submitFollow = () => {
  followFormRef.value.validate((valid) => {
    if (valid) {
      // 模拟跟进
      setTimeout(() => {
        ElMessage.success('跟进成功');
        showFollowDialog.value = false;
        loadBusinessData();
      }, 300);
    }
  });
};

// 处理踹回公海
const handleRecycleToPool = (row) => {
  ElMessageBox.confirm(
    '确认将该商机踹回公海吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 模拟踹回公海
    setTimeout(() => {
      // 从列表中移除（因为状态变为回收后不应再显示）
      businessList.value = businessList.value.filter(item => item.id !== row.id);
      ElMessage.success('操作成功');
    }, 300);
  }).catch(() => {
    // 取消操作
  });
};

// 处理转客户
const handleConvertToCustomer = (row) => {
  ElMessageBox.confirm(
    '确认将该商机转为客户吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 模拟转客户
    setTimeout(() => {
      // 从列表中移除（因为状态变为转客户后不应再显示）
      businessList.value = businessList.value.filter(item => item.id !== row.id);
      ElMessage.success('操作成功');
    }, 300);
  }).catch(() => {
    // 取消操作
  });
};
</script>

<style scoped>
/* 容器样式 */
.clue-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 搜索筛选区域 */
.search-filter {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.filter-left {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.search-input {
  width: 180px;
}

.search-select {
  width: 180px;
}

.filter-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-btn {
  min-width: 80px;
}

.reset-btn {
  min-width: 80px;
}

/* 工具栏 */
.toolbar {
  background-color: #ffffff;
  padding: 16px 20px;
  border-radius: 4px;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 表格容器 */
.clue-table-wrapper {
  background-color: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 表格样式 */
:deep(.el-table) {
  width: 100%;
  border: none;
}

:deep(.el-table__header-wrapper) {
  background-color: #fafafa;
}

:deep(.el-table__header th) {
  background-color: #fafafa;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #ebeef5;
  padding: 12px 0;
}

:deep(.el-table__body tr:hover > td) {
  background-color: #f5f7fa;
}

:deep(.el-table__body tr td) {
  border-bottom: 1px solid #ebeef5;
  padding: 12px 0;
}

:deep(.el-table__row) {
  transition: background-color 0.2s;
}

/* 状态样式 */
.status-follow {
  color: #1890ff;
  font-weight: 500;
}

.status-fake {
  color: #909399;
  font-weight: 500;
}

/* 分页样式 */
.pagination {
  padding: 16px 20px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #ebeef5;
}

/* 按钮样式 */
:deep(.el-button) {
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
}

/* 输入框样式 */
:deep(.el-input__wrapper),
:deep(.el-select__wrapper) {
  border-radius: 4px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .clue-container {
    padding: 15px;
  }
  
  .search-input,
  .search-select {
    width: 160px;
  }
}

@media (max-width: 768px) {
  .clue-container {
    padding: 10px;
  }
  
  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-left,
  .filter-right {
    width: 100%;
  }
  
  .search-input,
  .search-select {
    width: 100%;
  }
  
  .toolbar {
    flex-direction: column;
  }
  
  .toolbar .el-button {
    width: 100%;
    justify-content: center;
  }
}
</style>